<template>
  <div class="records-box">
    <header>
        <el-select v-model="value" class="m-2" placeholder="选择门店信息">
            <el-option
              v-for="item in state.options "
              :key="item"
              :label="item"
              :value="item"
            />
       </el-select>
       <el-button type="primary" @click="handleShop(value)">查询</el-button>
      <el-button text @click="dialogFormVisible = true">新增</el-button>

      <!-- 遮罩层表单 -->
      <el-dialog
       v-model="dialogFormVisible" 
       title="用户打卡">
            <el-form :model="from">
              <el-form-item label="打卡人" :label-width="formLabelWidth">
                <el-input v-model="name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="打卡时间" :label-width="formLabelWidth">
                <el-input v-model="name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="门店" :label-width="formLabelWidth">
                <el-select v-model="value" class="m-2" placeholder="选择门店信息">
                   <el-option
                     v-for="item in options"
                    :key="item.value"
                     :label="item.label"
                     :value="item.value"
                   />
                </el-select>
              </el-form-item>
              <el-form-item label="打卡地址" :label-width="formLabelWidth">
                <el-input v-model="name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="打卡地址" :label-width="formLabelWidth">
                <el-input v-model="name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="打卡地址" :label-width="formLabelWidth">
                <el-input v-model="name" autocomplete="off" />
              </el-form-item>
            </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">
                    确定
                  </el-button>
                </span>
              </template>
       </el-dialog>
    </header>
    <main>
        <!-- 渲染表格数据 -->
        <el-table :data="state.recordData" style="width: 100%">
           <el-table-column prop="user_name" label="填写人" width="120" fixed />
           <el-table-column prop="shop_name" label="所属门店" width="150" />
           <el-table-column prop="time" label="填写时间" width="260" />
           <el-table-column prop="lng" label="经度" width="260" />
           <el-table-column prop="lat" label="纬度" width="260" />
           <el-table-column prop="address" label="内容" width="400" />
        </el-table>
    </main>
  </div>
</template>

<script setup>
   import { ref , reactive } from 'vue'
   import { shopRecordLsit,shopList } from '@/apis/shop'
   const dialogFormVisible = ref(false)
   const formLabelWidth = '140px'

   const value = ref('')

    //  const options = [
    //    {
    //      value: '开心便利店',
    //      label: '开心便利店',
    //    },
    //    { 
    //      value: '高新区一分店',
    //      label: '高新区一分店',
    //    },
    //    {
    //      value: '高新区',
    //      label: '高新区',
    //   },
    //    {
    //      value: '乐多便利店',
    //      label: '乐多便利店',
    //    },
    //    {
    //      value: '成都总店',
    //      label: '成都总店',
    //    },
    //  ]

     const form = reactive({
       name: '',
       region: '',
       date1: '',
       date2: '',
       delivery: false,
       type: [],
       resource: '',
       desc: '',
     })

     //考勤列表数据
    const state= reactive({
      //考勤列表数据
      recordData:[],
      //下拉数据
      options:[],
      //门店列表数据
      dataShop:[],
      //查询
      query:[]
    })
    //总条数
    const total = ref(0)

    const recordsList = async () => {
        const data = await shopRecordLsit({page:1,size:10})
        state.recordData = data.data.rows
        console.log(state.recordData)
     }
    recordsList()

    // 获取门店列表信息
    const shopData = async () => {
      const res = await shopList()
      state.dataShop = res.data.rows
      console.log(res)
      state.options = state.dataShop.map(item => item.shop_name)
    }
    shopData()
       //查询条件
     
    
    //查询门店
   function handleShop(value) {
    console.log(value)
    state.query = state.recordData.filter(item => {
      if(item.shop_name === value){
        return item
      }
    })
    state.recordData = state.query
    console.log(state.query)
   }
   
</script>

<style lang="less" scoped>
  header{
    display: block;
    width: 100%;
    height: 80px;
    text-align: right;
    line-height: 80px;
    border-bottom:1px solid #fff;
    button{
      margin: 12px;
    }
   }
   main{
    height: 100%;
    background-color: #fff;
    padding: 8px 12px;
   }
   .el-dialog__header{
   padding: 0;
   margin: 0;
   }

   /deep/ .el-dialog .el-dialog__header{
     text-align: left;
     line-height: 0;
   }
   /deep/ .el-form-item__content{
    line-height: 32px;
   }

   /deep/ .el-progress{
    margin-bottom: 0px
   }

   /deep/ .el-form-item label{
    width:54px;
   }
  /deep/ #el-id-360-8{
    width:54px;
  }
</style>
